<template>
	<div id="tjGeDan">
		<button class="back_btn" @click="gdBack">
			<i class="iconfont icon-fanhui"></i>
		</button>
		<div class="titleBg">
			<img :src="playlist.coverImgUrl" class="bg"  />
		</div>
		<div class="titleImg">
				<img :src="playlist.coverImgUrl"/>
		</div>
		<p class="listName">
			{{playlist.name}}
		</p>
		<div class="user">
			<span v-if="playlist" class="userImg"><img :src="playlist.creator.avatarUrl"/></span>
			<span class="userName" v-if="playlist">{{playlist.creator.nickname}}</span>
		</div>
		<div class="playAll">
			<i class="iconfont icon-bofang1 cf"></i>
			<span class="cf">播放所有</span>
		</div>
		<div class="searchSingBox">
			<div class="searchSing" v-for="(t,i) in playlist.tracks" @click="play(t.id)">
			<span class="sing_name">
				{{t.name}}
			</span>
			<p class="search_p">
				<span class="singer" v-for="(a,i) in t.ar">
				{{a.name}}
				<span v-if="(i!==t.ar.length-1)">/</span>
				</span>
				
				<span class="album">
					- {{t.al.name}}
				</span>
			</p>
		</div>
		</div>
		
	</div>
</template>

<script>
	
	import axios from 'axios';
	$(window).scroll(function(){						
		var tt=$(window).scrollTop();	
		if(tt>190){
			$(".playAll").css({"position":"fixed","top":"0"})
		}else{
			$(".playAll").css({"position":"absolute","top":"190px"})
		}
	})
	export default{
		beforeMount(){
			var id = this.$route.query.gdId;
			console.log(id);
			axios.get("https://netease.bluej.cn/playlist/detail?timestamp=11&id="+id).then((res)=>{
				this.playlist=res.data.playlist;
				console.log(this.playlist);
			});
						
		},	
		data(){
			return{
				playlist:"",				
			}
		},
		methods:{
			gdBack(){
				this.$router.go(-1);
				console.log(this)
				this.$parent.flag=true;
			},
			play(songid){
				this.$store.commit("change",{
					playState:true,
					id:songid,
				});
				console.log("aaa",this);
				this.$parent.$refs.player.getSong();
				this.$router.push({path:"/play",query:{id:songid}});
				this.$parent.$parent.flag=false;
			},
			
		}
	}
	
	
</script>

<style lang="scss">
	#tjGeDan{
		max-width: 600px;
		position:relative;
		.back_btn{
			position: absolute;
			z-index: 10;
			background: none;
			outline: none;
			border: none;
			top:10px;
			left:20px;
			
			i{
				font-size: 30px;
				color: #D43C33;
			}
		}
		.titleBg{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height:190px;
			overflow:hidden;
			.bg{
				width: 100%;
				height: 100%;
				-webkit-filter: blur(5px); 
   				 filter: blur(5px);
   				 transform: scale(1.3);
			}
		}
		.titleImg{
				position: absolute;
				top:25px;
				left:10px;
				width: 150px;
				height: 150px;
				img{
					width: 100%;
				}
		}
		.listName{
			position: absolute;
			width: 50%;
			text-align: left;
			top:40px;
			left: 170px;
		}
		.user{
			position: absolute;
			left: 170px;
			top: 100px;
			.userImg{
				display: inline-block;
				width: 33px;
				height:33px;
				border-radius:50%;
				overflow:hidden;
				img{
					width: 100%;
					
				}
			}
			.userName{
				display: inline-block;
				vertical-align: top;
				color: white;
				line-height: 33px;
				font-size: 13px;
			}
		}
		.playAll{
			position: absolute;
			top: 190px;
			width: 100%;
			height: 50px;
			background:#343435;
			border-radius:10px;
			i{
				font-size: 30px;
				float: left;
				padding: 10px;
				color: #D43C33;
			}
			span{
				float: left;
				line-height: 50px;
				font-size: 18px;
				color: white;
			}
		}
		.searchSingBox{
			padding-top: 240px;
		}
		.searchSing{
		padding-left: 15px;
		text-align: left;
		height: 70px;
		.sing_name{
			padding-top: 10px;
			display: inline-block;
			width: 100%;
			font-size: 17px;
			color: white;
			overflow:hidden;
		    text-overflow:ellipsis;
		    white-space:nowrap;
		}
		.search_p{
			overflow:hidden;
		    text-overflow:ellipsis;
		    white-space:nowrap;
			.singer{
			color: #D43C33;
			font-size: 12px;
			}
			.album{
				color: #bababb;
				font-size: 12px;
			}
		}
	}
	}
</style>